<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的任务</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../../css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/normal.css" />
    <link rel="stylesheet" type="text/css" href="../../css/taskList.css" />
    <link rel="stylesheet" type="text/css" href="../../iconfont/iconfont.css" />
</head>

<body>
    <div class="page allWarp">
        <header class="bar bar-nav padding0" style="height:3.125rem;z-index:9;">
            <!-- 头部标签页 -->
            <div class="buttons-tab fixed-tab">
                <a href="#tab1" class="tab-link button reTop0 active" onclick="tabChange('2')">待处理</a>
                <a href="#tab2" class="tab-link button reTop0" onclick="tabChange('3')">已完成</a>
            </div>
        </header>
        <div class="content ">
            <div class="tabs">
                <div id="tab1" class="tab active infinite-scroll">
                    <div class="content-block">
                        <div class="taskBox" v-for="item in retailList" :data-projectCode="item.projectCode" :data-nodeCode="item.nodeCode" onclick="moveDetail('dcl')">
                            <div class="taskTop">
                                <span class="36" v-text="item.nodeName"></span>
                                <span class="col999" v-text="capitalize(item.nodeCreateTime)"></span>
                            </div>
                            <div class="taskCenter">
                                <ul>
                                    <li>
                                        <span class="width20 col999">项目名称:</span>
                                        <span class="width80 col36" v-text="item.projectName"></span>
                                    </li>
                                    <li>
                                        <span class="width20 col999">客户名称:</span>
                                        <span class="width80 col36" v-text="item.customerName"></span>
                                    </li>
                                    <li>
                                        <span class="width20 col999">客户电话:</span>
                                        <span class="width80 col36" v-text="item.customerPhone"></span>
                                    </li>
                                    <li>
                                        <span class="width20 col999">客户地址:</span>
                                        <span class="width80 col36" v-text="item.customerAddress"></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="taskBottom">
                                <span>查看详情</span>
                                <span>
                                    <i class="iconfont icon-arrow-right"></i>
                                </span>
                            </div>
                        </div>
                        <div v-if="retailList.length == 0&&isEmpty == true" class="textcenter"  style="margin-top: 5rem;">
                            <span class="font18 labelTxt">您还没有相关信息</span>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                </div>
                <div id="tab2" class="tab infinite-scroll">
                    <div class="content-block">
                        <div class="taskBox" v-for="item in retailList" :data-projectCode="item.projectCode" :data-nodeCode="item.nodeCode" onclick="moveDetail('ywc')">
                            <div class="taskTop">
                                <span class="36" v-text="item.nodeName"></span>
                                <span class="col999" v-text="capitalize(item.nodeCreateTime)"></span>
                            </div>
                            <div class="taskCenter">
                                <ul>
                                    <li>
                                        <span class="width20 col999">项目名称:</span>
                                        <span class="width80 col36" v-text="item.projectName"></span>
                                    </li>
                                    <li>
                                        <span class="width20 col999">客户名称:</span>
                                        <span class="width80 col36" v-text="item.customerName"></span>
                                    </li>
                                    <li>
                                        <span class="width20 col999">客户电话:</span>
                                        <span class="width80 col36" v-text="item.customerPhone"></span>
                                    </li>
                                    <li>
                                        <span class="width20 col999">客户地址:</span>
                                        <span class="width80 col36" v-text="item.customerAddress"></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="taskBottom">
                                <span>查看详情</span>
                                <span>
                                    <i class="iconfont icon-arrow-right"></i>
                                </span>
                            </div>
                        </div>
                        <div v-if="retailList.length == 0&&isEmpty == true" class="textcenter"  style="margin-top: 5rem;">
                            <span class="font18 labelTxt">您还没有相关信息</span>
                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../js/zepto.js"></script>
    <script type="text/javascript" src="../../js/sm.min.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../js/ajax.js"></script>
    <script type="text/javascript" src="../../js/back.js"></script>
    <script type="text/javascript">
        var keyN = JSON.parse(getCookie("user_data_three"));
        var dutyUserId;
        if (keyN != null) {
            dutyUserId = keyN.userId;
        }
        var demo = new Vue({
            el: '.allWarp',
            data: {
                isEmpty: false,
                loading: false, //无限下拉状态
                pageNumber: 1, //页数
                pageSize: 10, //    条数
                orderStatus: '2', //状态
                retailList: [], //提现记录详情
                totalNum: 0, //列表总数
            },
            mounted:function() {
                inits();
            },
        });

        function inits() {
            setTimeout(function() {
                foreverPull();
                changeList();
            }, 500);
        }
        // 任务列表
        function changeList(type) {
            var params = {};
            params.status = demo.orderStatus;
            params.dutyUserId = dutyUserId;
            kfAjaxGet.orderList(params, function(json) {
                if (json.code == '200') {
                    if (params.status != demo.orderStatus) {
                        return;
                    }
                    if(type == 'refresh'){
                        demo.retailList =json.data.pageContent;
                    }else{
                        demo.retailList = demo.retailList.concat(json.data.pageContent);   
                    }
                    
                    demo.totalNum = json.data.totalElements;
                    if (json.data.pageContent == null) {
                        demo.isEmpty = true;
                        demo.retailList = [];
                    } else {
                        demo.isEmpty = false;
                    }
                    console.log(demo.retailList.length)
                    console.log(demo.totalNum)
                    if (demo.retailList.length >= demo.totalNum) {
                        $('.infinite-scroll-preloader').hide();
                    }
                    console.log(demo.retailList)
                    demo.pageNumber++;
                    demo.loading = false;
                    console.log(demo.retailList)
                } else if (checkcode(json.code)) {

                } else if (json.code == '400') {
                    window.location = '../register/bindingPhone.html?codeType=3';
                } else {
                    $.toast(json.message);
                }
            });
        }
        // tab切换点击
        function tabChange(val) {
            if (val == demo.orderStatus) {
                return;
            }
            // for(var i = 1; i < 1000; i++) {
            //     clearInterval(i);
            // }
            demo.orderStatus = val;
            demo.pageNumber = 1;
            demo.retailList = [];
            $('.infinite-scroll-preloader').show();
            $.attachInfiniteScroll($('.infinite-scroll'));
            changeList();

        }
        // 无限下拉
        function foreverPull() {
            $(document).on('infinite', function() {
                if (demo.loading) return;
                demo.loading = true;
                // 判断是否为还有数据
                if (demo.retailList.length >= demo.totalNum) {
                    console.log('123')
                    // 销毁无限加载事件
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 移除加载提示符
                    $('.infinite-scroll-preloader').hide();
                    return;
                }
                setTimeout(function() {
                    changeList();
                    $.refreshScroller();
                }, 1000)
            });
        }
        // 跳转详情
        function moveDetail(val){
            var _that = $(event.currentTarget);
            var projectCode = _that.attr("data-projectCode");
            var nodeCode = _that.attr("data-nodeCode");
            if (val == 'dcl') {
                window.location = 'taskDetail.html?projectCode='+projectCode+'&nodeCode='+nodeCode+'&hasnode=1';
            } else {
                window.location = 'taskDetail.html?projectCode='+projectCode+'&nodeCode='+nodeCode+'&hasnode=2';
            } 
        }
        $(function(){
            $('#gohome').on('click',function(){
                window.location = 'taskList.html';
            })
        })
        $.init();
    </script>
</body>
</html>